<template>
  <div class="training_warp">
    <componentsHeader></componentsHeader>
    <div class="training_centent">
      <div class="training_box">
        <div class="training_box_head">
          <div class="fl">项目列表</div>
          <div class="fr"><span @click="dialogTableVisible1=true">行业政策</span><span
              @click="dialogTableVisible=true">训练须知</span></div>
        </div>
        <div class="training_box_content">
          <!-- <el-table :data="taskList" style="width: 100%;border: 1px solid #DCE0E3;"
            :header-cell-style="{'text-align':'center'}" :cell-style="{'text-align':'center'}">
            <el-table-column prop="date" label="审计单位" width="180">
            </el-table-column>
            <el-table-column prop="name" label="审计内容" width="180">
            </el-table-column>
            <el-table-column prop="address" label="被审单位">
            </el-table-column>
            <el-table-column prop="address" label="是否签约">
            </el-table-column>
            <el-table-column prop="address" label="风险等级">
            </el-table-column>
            <el-table-column prop="address" label="签约日期">
            </el-table-column>
            <el-table-column prop="address" label="操作">
              <template slot-scope="scope">
                <el-button size="mini" type="primary" @click="getInto(scope.$index, scope.row)">进入</el-button>
              </template>
            </el-table-column>
          </el-table> -->
          <div class="task_list">
            <div class="task_title">
              <span><span>任务名称：</span>{{tasks.taskName}}</span>
              <span><span>任务时间：</span>{{tasks.competitionDate}}</span>
              <span>进行中</span>
              <span class="fr"><span>角色：</span>随机分配 </span>
            </div>
            <div class="task_content">
              <div class="case_name">{{tasks.taskName}}</div>
              <div class="company_name">
                <div>

                  <p><span>审计单位</span> {{tasks.auditor.caseName}} </p>
                  <p v-for="item in tasks.auditees"><span>被审单位</span> {{item.caseName}} </p>
                </div>
              </div>
              <div class="operation_btn"><span>进入</span></div>
            </div>
          </div>
          <div class="seeHistory">历史任务答卷 ></div>
        </div>
      </div>
    </div>
    <div class="train_box">
      <el-dialog title="考试训练须知" :visible.sync="dialogTableVisible" :close-on-click-modal="false">
        <div class="train_box_txt">
          <div class="skill_txt">
            <p>大数据审计基本技能</p>
            <div><span>时长：150分钟</span><span> 总分：400分</span></div>
          </div>
          <div class="skill_txt">
            <p>大数据经管和内控审计技能</p>
            <div><span>时长：150分钟</span><span> 总分：400分</span></div>
          </div>
        </div>
        <div class="describe">
          <div>考试描述</div>
          <p>1.采用自动评分系统进行统计</p>
          <p>2.分为“大数据审计基本技能”与“大数据经管和内控审计技能”竞赛两个环节，分
            上下两场进行。竞赛内容均以案例形式体现，采用团队竞赛方式，4人共同完成，团队成员自行分工。</p>
        </div>
      </el-dialog>
    </div>
    <div class="policy_box">
      <el-dialog :visible.sync="dialogTableVisible1" :modal="false" :show-close="false">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="用户管理" name="first"></el-tab-pane>
          <el-tab-pane label="配置管理" name="second"></el-tab-pane>
          <el-tab-pane label="角色管理" name="third"></el-tab-pane>
          <el-tab-pane label="定时任务补偿" name="fourth"></el-tab-pane>
        </el-tabs>
        <div class="tabs_content">
          <div class="tabs_line" v-for="item in 8">
            <p>中华人民共和国审计法规与审计准则及政策解读</p>
            <span>2021-06-21</span>
          </div>
          <el-pagination background layout="prev, pager, next" :total="1000">
          </el-pagination>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
  import componentsHeader from "@/components/header/header.vue";
  export default {
    name: "trainingCenter",
    data() {
      return {
        tasks: {},
        activeName: "first",
        dialogTableVisible: false,
        dialogTableVisible1: false,
        pageIndex: 1,
        pageSize: 10,
      }
    },
    components: {
      componentsHeader,
    },
    created() {
      this.GetTaskList();
    },
    methods: {
      GetTaskList() {
        let params = {
          status: "",
          taskName: "",
          taskType: "",
          pageIndex: this.pageIndex,
          pageSize: this.pageSize,
          orderby: 0
        };
        this.$Api.GetTaskList(params)
          .then(res => {
            if (res.code == 200) {
              console.log(res)
              this.tasks = res.data;
            }
          })
          .catch(err => {
            console.log(err, "err");
          });
      },
      getInto(index, row) {

      },
      handleClick() {},
    },
    watch: {

    }
  }
</script>

<style lang="less" scoped>
  .training_warp {
    .policy_box {
      /deep/.el-dialog {
        width: 1200px;
        height: 609px;
        background: #FFFFFF;
        box-shadow: 0px 0px 10px 0px #E5E9EF;
        border-radius: 4px;

        .tabs_content {
          padding: 0 30px;

          .el-pagination {
            margin-top: 26px;
            text-align: right;

            /deep/.btn-next,
            /deep/.btn-prev {
              border-radius: 3px;
              width: 70px;
              background: #ffffff;
              border-radius: 3px;
              border: 1px solid #eeeeee;
              height: 32px;
              line-height: 32px;
              font-size: 13px;
              font-weight: 400;
              color: #999999;
            }

            /deep/.el-pager {
              /deep/.number:hover {
                color: #e62402;
              }

              /deep/ li {
                width: 34px;
                height: 32px;
                line-height: 32px;
                background: #ffffff;
                border-radius: 3px;
                border: 1px solid #eeeeee;
              }

              li:not(.disabled).active {
                background: linear-gradient(270deg, #E1211E 0%, #FA4643 100%);
                ;
                font-size: 13px;
                font-weight: 400;
                color: #ffffff;
              }
            }
          }

          .tabs_line {
            line-height: 58px;
            display: flex;
            border-bottom: 1px solid #D9D9D9;

            p {
              min-width: 0;
              flex: 1;
              font-size: 16px;
              color: #222;
            }

            span {
              color: #999999;
              font-size: 13px;
            }
          }
        }

        .el-dialog__header {
          display: none;
        }

        .el-dialog__body {
          padding: 0;

          .el-tabs {
            .el-tabs__nav-wrap::after {
              display: none;
            }

            .el-tabs__nav-scroll {
              height: 47px;
              line-height: 50px;
              background: #338AFF;
              padding-left: 10px;
            }

            .el-tabs__item {
              color: #fff;

              width: 99px;
              height: 46px;
              line-height: 46px;
              padding: 0;
              text-align: center;
              border-radius: 4px 4px 0px 0px;
            }

            .el-tabs__active-bar {
              display: none;
            }

            .el-tabs__item.is-active {
              background: #fff;
              color: #338AFF;
            }
          }
        }
      }
    }

    .train_box {
      /deep/.el-dialog {
        width: 800px;
        height: 483px;
        background: #FFFFFF;
        box-shadow: 0px 2px 16px 0px rgba(0, 0, 0, 0.7);
        border-radius: 10px;
        display: flex;
        flex-direction: column;
        margin: 0 !important;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);

        .el-dialog__header {
          border-bottom: 1px solid #E6E6E6;
          padding-bottom: 20px;
        }

        .describe {
          div {
            line-height: 70px;
            color: #333;
            font-size: 16px;
            font-weight: 500;
          }

          p {
            font-size: 14px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #5A6A79;
            line-height: 26px;
          }
        }

        .train_box_txt {
          box-sizing: border-box;
          padding-left: 10px;
          border-bottom: 1px solid #D9D9D9;

          .skill_txt {
            margin-bottom: 27px;

            p {
              height: 22px;
              font-size: 16px;
              font-family: PingFangSC-Medium, PingFang SC;
              font-weight: 500;
              color: #222222;
              line-height: 22px;
              position: relative;
              margin-bottom: 10px;

              &::before {
                content: '';
                position: absolute;
                width: 7px;
                height: 7px;
                background: #338AFF;
                border-radius: 50%;
                left: -10px;
                top: 8px;
              }
            }

            div {
              span {
                margin-right: 60px;
                color: #5A6A79;
                font-size: 16px;
              }
            }
          }
        }
      }
    }

    .training_centent {
      background: url("/static/images/bg_index@2x.png") no-repeat;
      background-size: 100% 100%;
      height: calc(100vh - 70px);
      padding-top: 118px;
      box-sizing: border-box;

      .training_box {
        width: 1200px;
        margin: 0 auto;
        min-height: 474px;
        background: #FFFFFF;
        box-shadow: 0px 0px 10px 0px #E5E9EF;
        border-radius: 4px;

        .training_box_head {
          width: 1200px;
          height: 52px;
          line-height: 52px;
          background: #338AFF;
          border-radius: 4px 4px 0px 0px;

          .fl {
            float: left;
            font-size: 16px;
            color: #fff;
            margin-left: 19px;
          }

          .fr {
            float: right;

            span {
              text-decoration: underline;
              font-size: 14px;
              color: #fff;
              margin-right: 20px;
              cursor: pointer;
            }
          }
        }

        .training_box_content {
          box-sizing: border-box;
          padding: 21px;
          .seeHistory{
            float: right;
            height: 22px;
            font-size: 16px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #338AFF;
            line-height: 22px;
            cursor: pointer;
          }
          .task_list {
            border: 1px solid #DCE0E3;
            border-radius: 4px;
            overflow: hidden;
            margin-bottom: 10px;
            .task_title {
              height: 40px;
              line-height: 40px;
              background: #F6F7F9;
              padding-left: 19px;
              box-sizing: border-box;
              font-size: 14px;
              // border-bottom: 1px solid #DCE0E3;
              span{
                margin-right: 20px;
                span{
                  color: #888C9B;
                margin-right: 0px;
                }
              }
              span.fr{
                float: right;
              }
            }

            .task_content {
              min-height: 80px;
              display: flex;

              .case_name {
                width: 256px;
                border-right: 1px solid #DCE0E3;
                display: flex;
                align-items: center;
                justify-content: center;
                // height: 100%;
              }

              .company_name {
                flex: 1;
                min-width: 0;
                border-right: 1px solid #DCE0E3;
                // height: 100%;
                display: flex;
                align-items: center;
                justify-content: center;

                p {
                  font-size: 16px;
                  line-height: 24px;

                  span {
                    color: #888C9B;
                  }
                }
              }

              .operation_btn {
                width: 270px;
                display: flex;
                align-items: center;
                justify-content: center;

                span {
                  display: block;
                  width: 80px;
                  text-align: center;
                  height: 30px;
                  line-height: 30px;
                  background: #338AFF;
                  border-radius: 4px;
                  color: #fff;
                  font-size: 14px;
                }
              }
            }
          }

          /deep/.el-table {
            &::before {
              display: none;
            }
          }
        }
      }
    }
  }
</style>
<!-- <style type="text/css">
  .training_warp .el-pagination.is-background .btn-next,
  .training_warp .el-pagination.is-background .btn-prev,
  .training_warp .el-pagination.is-background .el-pager li {
    background: #fff;
  }
</style> -->
